<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绑定样式</title>
    <style>
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }
      .happy {
        border: 4px solid red;
        background-color: rgba(255, 255, 0, 0.644);
        background: linear-gradient(30deg, yellow, pink, orange, yellow);
      }
      .sad {
        border: 4px dashed rgb(2, 197, 2);
        background-color: gray;
      }
      .normal {
        background-color: skyblue;
      }
      .atguigu1 {
        background-color: yellowgreen;
      }
      .atguigu2 {
        font-size: 30px;
        text-shadow: 2px 2px 10px red;
      }
      .atguigu3 {
        border-radius: 20px;
      }
    </style>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- 将变化的样式进行绑定动态指定 -->
      <!-- 绑定 class 样式  字符串写法,适用于:样式的类名不确定,需要动态指定-->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
      <br />
      <!-- :class ==> v-bind:class 数据绑定 将变化的class绑定到data中的a属性上 -->
      <!-- :class="xxx" Vue会将xxx进行解析，和class中的值进行拼接 -->

      <!-- 绑定 class 样式 数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
      <div class="basic" :class="classArr">{{name}}</div>
      <br />

      <!-- 绑定 class 样式 对象写法,适用于:要绑定的样式个数确定,名字也确定、但要动态决定是否使用 -->
      <div class="basic" :class="classObj">{{name}}</div>

      <!-- 绑定 style 样式 对象写法 -->
      <!-- <div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div> -->
      <!-- :style="{fontSize: fsize+'px'}" 引号内的{fontSize: fsize+'px'}为一段js代码Vue会自动解析执行 -->
      <div class="basic" :style="styleObj">{{name}}</div>
      <!-- 绑定 style 样式 数组写法 -->
      <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          name: "点我变样式",
          mood: "normal",
          classArr: ["atguigu1", "atguigu2", "atguigu3"],
          classObj: {
            atguigu1: false, // 是否使用atguigu1
            atguigu2: true, // 是否使用atguigu2
          },
          styleObj:{
            fontSize: "40px", 
            color: "red",
          },
          styleObj2:{
            backgroundColor: "yellow",
          }
        };
      },
      methods: {
        changeMood() {
          const arr = ["happy", "sad", "normal"]; // 随机更换心情
          this.mood = arr[Math.floor(Math.random() * arr.length)];
        },
      },
    });
  </script>
</html>
